<template>
  <div class="musiclist">
    <div class="musiclist-header">
      <div class="musiclist-title">我的歌单</div>
    </div>
    <div class="musiclist-content">
      <div class="musiclist-empty" v-if="menuList.length === 0">没有创建过歌单</div>
      <ul>
        <li v-for="(item, index) in menuList" class="musiclist-li">
          <div class="li-info">
            <router-link :to="{name:'MusicList', params: {id: item._id}}">
              <span class="li-title" v-text="item.menuname"></span>
            </router-link>
            <span class="li-singer">
              <i class="fa fa-music fa-fw"></i>
              <span v-text="item.songs.length"></span>
            </span>
            <div class="li-intro" v-if="item.intro" v-text="item.intro"></div>
          </div>
          <div class="li-controller">
            <div class="li-controller-btn" @click="playAllMusic(index)">
              <i class="fa fa-play fa-fw"></i>播放歌单</div>
            <div class="li-controller-btn" @click="deleteMenu(item._id)">
              <i class="fa fa-trash fa-fw"></i>删除歌单</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

import APIURL from '../APIURL';

export default {
  name: 'mylist',
  data() {
    return {
      connect: false,
      status: true,
      menuList: [],
    };
  },
  computed: {
    ...mapState({
      token: state => state.account.token,
      accountStatus: state => state.account.status,
      accountVerified: state => state.account.verified,
    }),
  },
  methods: {
    getType(typeNum) {
      switch (typeNum) {
        case 1:
          return 'yc';
        case 2:
          return 'fc';
        case 3:
          return 'bz';
        default:
          return '';
      }
    },
    getAllMusicList() {
      return APIURL.GETMENU(this.token)
        .then((res) => {
          const data = res.data;
          const menu = data.menu;
          this.connect = true;
          if (data.success) {
            this.status = true;
            if (menu) {
              this.menuList = menu;
            }
          } else {
            this.status = false;
          }
        })
        .catch(() => {
          this.connect = false;
          this.status = false;
        });
    },
    playNewMusic(id, type) {
      this.$store.dispatch('getMusic', { id, type });
    },
    playAllMusic(index) {
      this.$store.commit('changeMusicList', this.menuList[index].songs);
      this.playNewMusic(this.menuList[index].songs[0].songId,
        this.getType(this.menuList[index].songs[0].type));
    },
    deleteMenu(mid) {
      const r = confirm('是否删除歌单');
      if (r !== true) {
        return;
      }
      APIURL.DELETEMENU(this.token, mid)
        .then((res) => {
          const data = res.data;
          if (data.success) {
            alert('删除成功');
            this.getAllMusicList();
          } else {
            alert('删除失败');
          }
        })
        .catch(() => {
          alert('服务器连接失败');
        });
    },
    init() {
      if (!this.accountVerified) {
        this.$router.replace('/login');
        return;
      }
      this.getAllMusicList();
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>

</style>
